Github Pages +Hexo搭建个人博客

发表于 | 分类于 | | 阅读次数: | 总阅读量 次

环境准备（以本教程为例）

  • win10专业版
  • Git 2.14.3Windows.1
  • Node.js 10.8.0.0
  • sublime编辑器

注意：在Windows下安装完成后，git如果是在之前就安装好的，需重启才能使用npm命令
Git安装选项解释见：
https://blog.csdn.net/ainuser/article/details/77609180

环境部署-在GitHub上创建Github Pages项目

注册Github

创建新仓库

点击“New”新建 “Repository”，这里一定要命名为“username.github.io”，然后选择Public，公开是免费的。
Github会识别并自动将该仓库设为Github Pages。用户主页是唯一的，填其他名称只会被当成普通项目。

关联Git与GitHub

1）准备SSH Key：

1
2
3
4
5
6
7
ls -al ~/.ssh  #根目录下检查本地是否本身存在SSH key
rm -rf ~/.ssh #若原本存在，则清除本地原有的SSH key或者在后面生成SSH key的时候对原ssh进行覆盖操作
git config --global user.name "<your_name>"  #设置Git登录的用户名，与github账户无关，做好记录
git config --global user.email "<your_email>"  #设置Git登录的邮箱，与github账户无关，做好记录
ssh-keygen -t ras -C "<your_github_email>"    #生成SSHkey，按照提示Enter，可不设置密码，设置密码后每当执行push操作时都需要输入密码，此处不设置，直接生成即可
ls -al ~/.ssh  #查看生成的SSH key文件：id_rsa、id_rsa.pub
cat ~/.ssh/id_rsa.pub #查看SSH key

2）添加SSH key：
Personal Setting > SSH and GPG keys>New SSH key
Title：随意即可
Key：按照提示复制，将准备好的SSH key全部复制粘贴过来

3）SSH key测试连接

1
2
3
4
5
$ ssh git@github.com #根目录下运行命令即可，不需要修改该命令的参数
 #如果设置了密码会出现这一行：Enter passphrase for key '/c/Users/llp/.ssh/id_rsa':
PTY allocation request failed on channel 0
Hi llplmlyd! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.#这里表示已经连接成功

Hexo建站

Hexo安装

1
$ npm install -g hexo-cli  #根目录下运行即可

本地新建博客站点文件夹<your_blog_name>

初始化建站

1
2
3
cd <your_blog_name> #进入站点文件夹，tips：可以直接在站点文件夹下右键Gitbash即由git进入了文件夹内
hexo init #在当前目录下初始化，注意一定要是空文件夹，否则会报错，无法初始化
npm install #开始初始化安装hexo各配置文件

初始化结果如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

有时候会有一些其他的文件如：package-lock.json等

配置_config.yml

配置文件修改可以借助编辑器进行修改，主要修改以下几个字段

#Site

1
2
3
4
5
6
 #Site
title #博客标题
subtitle #博客副标题
description #博客描述
author #作者
language 按照所选择主题进行设置，此处先默认处理

#Directory

1
2
3
#Directory
#如果是站点即博客文件夹，则采取默认配置即可；如果是其他站点下的子文件夹则须修改
#参考https://hexo.io/zh-cn/docs/configuration

## Themes

1
2
## Themes: https://hexo.io/themes/
theme: next #主题根据自己使用的主题所在的文件夹名字修改

# Deployment

1
2
3
4
5
6
# Deployment 部署Hexo与Github关联推送
## Docs: https://hexo.io/docs/deployment.html
deploy:
    type: git
    repo: ssh://git@github.com/[githubname]/[库名].github.io
    branch: master

# Search

1
2
3
4
5
6
7
8
# 手动添加本地搜索功能字段
# Search
# Local Search: http://theme-next.iissnan.com
search:
    path: search.xml
    field: post
    format: html
    limit: 10000

主题选择与配置

1）在hexo上下载解压喜欢的主题到本地
https://hexo.io/themes/
2）复制该主题文件夹到：站点文件夹/themes
3）修改 _config.yml 中的## Themes
4）验证是否启用

1
2
3
4
$ hexo new [layout] <title> #在站点根目录下gitbash输入，layout可不填，默认为post
$ hexo s --debug
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
#选中地址右键实时预览

5）主题配置文件修改
http://theme-next.iissnan.com/
① 主题 Scheme设定 > 设置 语言(站点配置文件中修改)
② Menu 菜单设置

1
2
3
4
5
6
7
8
# Value before `||` delimeter is the target link.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
menu:
home: / || home #首页
about: /about/ || user  #关于
tags: /tags/ || tags  #标签
categories: /categories/ || th  #目录
archives: /archives/ || archive #归档

③ Sidebar 侧栏设置：默认
④ Avatar 头像设置

1
2
3
4
5
6
# 将使用的头像图片调整成正方形并置入
#[站点文件夹]\themes\next\source\images
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
avatar: /images/your_avatar.jpg #文件名与后缀需完全对应

⑤ Social Links 添加社交连接

1
2
3
# Social Links.
social:
     Google: https://plus.google.com/yourname || google

⑥ links 友情链接

1
2
links:
    中文: 网址链接

⑦添加评论功能

1
2
3
4
5
6
7
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
    enable: true
    appid: your appid
    appkey: appkey

⑧添加阅读量统计、评论量统计
本文采用leancloud第三方插件
http://theme-next.iissnan.com/getting-started.html#leanclound-page-views
注册leancloud获得AppleID 和AppleKey
并在leancloud上添加两类class：Counter和Comments
https://leancloud.cn/
在主题配置文件中设置AppleID 和AppleKey，

⑨ 添加 访问量统计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
    # count values only if the other configs are false
    enable: true
    # custom uv span for the whole site
    site_uv: true
    site_uv_header: <i class="fa fa-user"> 访客数</i>
    site_uv_footer: 人次
    # custom pv span for the whole site
    site_pv: true
    site_pv_header: <i class="fa fa-eye"> 总访问量</i>
    site_pv_footer: 次
    # custom pv span for one page only
    page_pv: true
    page_pv_header: <i class="fa fa-file-o"> 总阅读量</i>
    page_pv_footer: 次

⑩ 添加标签
http://theme-next.iissnan.com/theme-settings.html#tags-page

6）新建目录
博客中的关于、标签和分类等栏目无文件夹，需要个人手动创建

1
hexo new page categories [栏目英文名称]

注意：要添加标签和自己新建目录之后侧栏才会显示出该数量

生成与部署到Github上

在站点目录下右键gitbash

1
2
3
4
5
$ hexo s --debug #可在各项详细配置完成后先进行测试
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
$ hexo clean  #可以清除缓存，再进行测试
$ hexo generate #简写为hexo g，生成静态文件，文件位于public文件夹中
$ hexo deploy    #简写为hexo d，部署网站到Github上，#可以生成与部署联用 hexo g -d 表示生成后立刻部署到github上

注意：这里不需要使用到Git 与remote的同步与push命令之类的，请不要强行push站点文件夹，使用hexo d只会将public文件夹与仓库同步，配置文件仍保留在本地。

参考链接：
https://hexo.io/zh-cn/docs/
http://theme-next.iissnan.com/
http://theme-next.iissnan.com/third-party-services.html